<template>
	<view class="popUContainer">
		<u-popup :show="show" :round="10" mode="center" @close="close" @open="open" closeable closeOnClickOverlay
			safeAreaInsetBottom>
			<view class="popUp">
				<!-- 标题 -->
				<view class="title">
					<text>设备台时记录</text>
				</view>

				<!-- 数据展示区域 -->
				<view class="data-container">
					<view class="data-row" v-for="(item, index) in lineList" :key="index">
						<view class="field-name">
							<text>{{ item.name }}：</text>
						</view>
						<view class="field-value">
							<text>{{ data[item.label] || '-' }}</text>
						</view>
					</view>
				</view>

				<!-- 按钮区域 -->
				<!-- <view class="button-group">
					<u-button type="primary" text="确认" @click="confirm" customStyle="margin-right: 30rpx"></u-button>
					<u-button text="取消" @click="close" color="#9E9E9E"></u-button>
				</view> -->

				<!-- 参考钉钉打卡 -->
				<view class="clock-container">
					<view class="clock-button">
						<u-button @click="handleClick" :custom-style="{
							width: '200rpx',
							height: '200rpx',
							borderRadius: '50%',
							backgroundColor: isActive ? '#f0f0f0' : '#2196F3',
							color: isActive ? '#1890ff' : '#100f0f',
							display: 'flex',
							flexDirection: 'column',
							justifyContent: 'center',
							alignItems: 'center',
							border: isActive ? '1px solid #1890ff' : '1px solid #d9d9d9'
						}">
							<span>{{ buttonText }}</span>
							<br />
							<span>{{ formattedTime }}</span>
						</u-button>
					</view>
				</view>


				<!-- <view>
					<up-link text="查看更多" @click="click" ></up-link>
				</view> -->

				<view @click="click">
					<text style="color: #007AFF;">查看更多</text>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
/**
 *   自定义弹窗详情组件
 *   * @property {Array}    lineList   字段配置 必要的！
 *   * @property {Object}   data       展示的数据 必要的！
 *   * @property {Boolean}  show       是否展示弹窗 (默认 false)
 *
 *   * @event {Function} open     弹出层打开 必要的！
 *   * @event {Function} close    弹出层收起 必要的！
 *   * @event {Function} confirm  确认按钮点击事件
 *
 */
export default {
	name: "popUpDetail",
	emits: ["open", "close", "confirm"],
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		data: {
			type: Object,
			default: () => ({}),
		},
		lineList: {
			type: Array,
			default: () => [],
		},
		defaultActive: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isActive: false,
			currentTime: new Date(),
			timer: null, // 新增定时器变量
			buttonText: '开启设备',
			formattedTime: '',
			timeRecords: [] // ⏱ 存储每次开始/结束的时间
		}
	},
	mounted() {
		// 组件挂载时启动定时器
		this.timer = setInterval(() => {
			this.currentTime = new Date()
		}, 1000) // 每秒更新一次
	},
	beforeUnmount() {
		// 组件销毁前清除定时器
		clearInterval(this.timer)
	},
	computed: {
		buttonText() {
			return this.isActive ? '关闭设备' : '开启设备';
		},
		formattedTime() {
			const hours = this.currentTime.getHours().toString().padStart(2, '0');
			const minutes = this.currentTime.getMinutes().toString().padStart(2, '0');
			const seconds = this.currentTime.getSeconds().toString().padStart(2, '0');
			return `${hours}:${minutes}:${seconds}`;
		},
	},
	methods: {
		close() {
			this.$emit('close');
		},
		open() {
			this.isActive = this.defaultActive; // 根据传入值设置初始状态
			this.$emit('open');
		},
		confirm() {
			this.$emit('confirm');
		},
		handleClick() {
			const now = new Date();
			const timeStr = this.formatTime(now);

			if (!this.isActive) {
				this.buttonText = '关闭设备';
				this.timeRecords.push({
					start: timeStr,
					device: {
						bmmc: this.data.bmmc,
						sbmc: this.data.sbmc,
						sbbh: this.data.sbbh
					}
				}); // 记录开始时间
			} else {
				this.buttonText = '开启设备';
				const lastRecord = this.timeRecords[this.timeRecords.length - 1];
				if (lastRecord && !lastRecord.end) {
					lastRecord.end = timeStr; // 补充结束时间
				}
			}

			this.isActive = !this.isActive;
			this.formattedTime = timeStr;
			console.log(this.timeRecords)
			this.$emit('deviceStatusChange', {
				status: this.isActive ? 'on' : 'off',
				record: this.timeRecords[this.timeRecords.length - 1]
			});

		},
		formatTime(date) {
			const pad = (n) => (n < 10 ? '0' + n : n);
			const year = date.getFullYear();
			const month = pad(date.getMonth() + 1);
			const day = pad(date.getDate());
			const hour = pad(date.getHours());
			const minute = pad(date.getMinutes());
			const second = pad(date.getSeconds());
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
		},
		click() {
			console.log("查看更多")
			this.$emit('viewMore', this.data); // 将当前设备数据传给父组件
		}
	}
}
</script>

<style scoped lang="scss">
.popUContainer {
	.popUp {
		width: 650rpx;
		padding: 40rpx 40rpx 0 40rpx;
		box-sizing: border-box;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
			color: #333;
		}

		.data-container {
			max-height: 600rpx;
			overflow-y: auto;
			margin-bottom: 40rpx;

			.data-row {
				display: flex;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				.field-name {
					width: 200rpx;
					font-weight: bold;
					color: #666;
				}

				.field-value {
					flex: 1;
					color: #333;
				}
			}
		}

		.button-group {
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
		}

		.clock-container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			// margin-top: auto;
		}

		.clock-button {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: rgb(0, 140, 255);
			color: white;
			font-size: 16px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}

	}
}
</style>
